<template>
  <div class="app-container">
    <el-tabs @tab-click="showPaneIndex">
      <el-tab-pane>
        <span slot="label" style="font-size: 20px; margin: 0px 20px 0px 20px"
          ><i class="el-icon-date"></i> 运维数据</span
        >

        <el-row :gutter="1">
          <el-col :span="6">
            <div class="grid-content bg-purple">
              <div class="top-title" @click="toNew_visitor">新访客</div>
              <div class="visitor">
                <div class="text">新访客占比</div>
                <div class="rate">{{ NewVisitors.newVisitorsPercentage }}%</div>
              </div>
              <div class="visitor-row">
                <div class="visit-item">
                  <div class="main-label">浏览量</div>
                  <div class="Data">{{ NewVisitors.numbersView }}</div>
                </div>
                <div class="visit-item">
                  <div class="main-label">访客数</div>
                  <div class="Data">{{ NewVisitors.numbersVisitors }}</div>
                </div>
                <div class="visit-item">
                  <div class="main-label">跳出率</div>
                  <div class="Data">{{ NewVisitors.heartRate }}%</div>
                </div>
              </div>

              <div class="visit">
                <div class="main-label">平均访问时长</div>
                <div class="Data">{{ NewVisitors.averageAccessTime }}</div>
              </div>
              <div class="visit" style="margin-top: 63px">
                <div class="main-label">平均访问页数</div>
                <div class="Data">{{ NewVisitors.averageAccessPage }}</div>
              </div>
            </div>
          </el-col>
          <div></div>
          <el-col :span="6" :push="1">
            <div class="grid-content bg-purple">
              <div class="top-title" @click="toOld_visitor">老访客</div>
              <div class="old-visitor">
                <div class="text">老访客占比</div>
                <div class="rate">{{ OldVisitors.oldVisitorsPercentage }}%</div>
              </div>
              <div class="visitor-row">
                <div class="visit-item">
                  <div class="main-label">浏览量</div>
                  <div class="Data">{{ OldVisitors.numbersView }}</div>
                </div>
                <div class="visit-item">
                  <div class="main-label">访客数</div>
                  <div class="Data">{{ OldVisitors.numbersVisitors }}</div>
                </div>
                <div class="visit-item">
                  <div class="main-label">跳出率</div>
                  <div class="Data">{{ OldVisitors.heartRate }}%</div>
                </div>
              </div>
              <div class="visit">
                <div class="main-label">平均访问时长</div>
                <div class="Data">{{ OldVisitors.averageAccessTime }}</div>
              </div>
              <div class="visit" style="margin-top: 63px">
                <div class="main-label">平均访问页数</div>
                <div class="Data">{{ OldVisitors.averageAccessPage }}</div>
              </div>
            </div>
          </el-col>

          <el-col :span="9" :push="2">
            <div class="grid-content bg-purple-bottom">
              <div class="top-title" @click="toTrend_analysis">趋势分析</div>

              <div class="bottom-content">
                <div class="fir-item">
                  <div class="content-item">浏览量（PV）</div>
                  <div class="item-count">{{ TrendAnalData.pageView }}</div>
                  <div
                    :class="
                      this.DataChangeRate[0] > 0
                        ? 'el-icon-top-right'
                        : 'el-icon-bottom-right'
                    "
                  >
                    <span>{{ this.DataChangeRate[0] }}</span>
                  </div>
                </div>

                <div class="thr-item">
                  <div class="content-item">IP数</div>
                  <div class="item-count">{{ TrendAnalData.numberIp }}</div>
                  <div
                    :class="
                      this.DataChangeRate[2] > 0
                        ? 'el-icon-top-right'
                        : 'el-icon-bottom-right'
                    "
                  >
                    <span style="">{{ this.DataChangeRate[2] }}</span>
                  </div>
                </div>
                <div class="sec-item">
                  <div class="content-item">访客数（UV）</div>
                  <div class="item-count">
                    {{ TrendAnalData.numberVisitors }}
                  </div>
                  <div
                    :class="
                      this.DataChangeRate[1] > 0
                        ? 'el-icon-top-right'
                        : 'el-icon-bottom-right'
                    "
                  >
                    <span style="">{{ this.DataChangeRate[1] }}</span>
                  </div>
                </div>

                <div>
                  <div class="content-item">跳出率</div>
                  <div class="item-count">{{ TrendAnalData.heartRate }}%</div>
                </div>
                <div>
                  <div class="content-item">平均访问时长</div>
                  <div class="item-count">
                    {{ TrendAnalData.averageAccessTime }}
                  </div>
                </div>
                <div>
                  <div class="content-item">平均访问页数</div>
                  <div class="item-count">
                    {{ TrendAnalData.averageAccessPage }}
                  </div>
                </div>
              </div>
            </div>
          </el-col>
        </el-row>

        <el-col :span="10">
          <div class="grid-content bg-purple">
            <div @click="toInterview_pages" class="top-title">Top6受访页面</div>
            <div class="top6-content" v-for="(index, item) in top6" :key="item">
              <div :class="'topSix top' + item">{{ item + 1 }}</div>
              <a class="top-url" :href="item.url">{{ index.url }}</a>
              <el-progress
                class="progress"
                :percentage="index.pageViewPercentage"
              ></el-progress>
              <div class="top-text" :title="index.problemName">
                浏览量:{{ " " + index.pageView }} <b>PV</b>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="12" :push="1">
          <div class="grid-content bg-purple-bottom-right">
            <div class="top-title" @click="toProblem_feedback">问题反馈</div>

            <div
              class="top6-content"
              v-for="(item, index) in qtop6"
              :key="index"
            >
              <div :class="'topSix top' + index">{{ index + 1 }}</div>

              <div class="qtop-name" :title="item.problemName">
                {{ item.problemName }}
              </div>
              <div class="qtop-text" :title="item.problemDescription">
                {{ item.problemDescription }}
              </div>

              <div class="qtop-time" :title="item.createTime">
                {{ item.createTime }}
              </div>

              <div v-if="item.feedbackState == 1" class="qtop-status-blue">
                已反馈
              </div>
              <div v-else class="qtop-status-red">未反馈</div>
            </div>
          </div>
        </el-col>

        <el-col :span="23">
          <div
            style="min-width: 800px; min-height: 300px; margin-top: 20px"
            class="chartsArea"
          >
            <div
              ref="chartColumn"
              style="width: 100%; height: 300%"
              v-if="changeStatus === true"
            ></div></div
        ></el-col>
      </el-tab-pane>

      <el-tab-pane>
        <span slot="label" style="font-size: 20px; margin: 0px 20px 0px 0px"
          ><i class="el-icon-date"></i> 数据预览</span
        >
        <el-col :span="23">
          <div class="grid-content bg-purple-dark">
            <div class="top-content">
              <div
                class="preview1"
                @dblclick="toBascinfo"
                @click="toGetData(1)"
              >
                <div>
                  <!-- getid方法做测试使用 -->
                  <div class="preview-type">热力学数据</div>
                  <img
                    style="width: 28px"
                    src="@/assets/images/shouye/Thermal.png"
                  />
                </div>
                <div class="main-label">总数据</div>
                <div class="Data">{{ toData[4] + toData[1] }}</div>
                <div>
                  <div class="el-icon-top-right">{{ " " }}10.2</div>
                  <div class="count-up">+1.01%&nbsp;本周</div>
                </div>
                <div class="main-label">已入库数据</div>
                <div class="Data">
                  {{ this.BasicInfos.total + this.ThermoInfos.total }}
                </div>
              </div>
              <div
                class="preview2"
                @dblclick="dynamic_info"
                @click="toGetData(2)"
              >
                <div>
                  <div class="preview-type">动力学数据</div>
                  <img
                    style="width: 28px"
                    src="@/assets/images/shouye/power.png"
                  />
                </div>
                <div class="main-label">总数据</div>
                <div class="Data">
                  {{ this.toData[1] }}
                  <span v-if="this.toData[1] == ''">0</span>
                </div>
                <div>
                  <div class="el-icon-top-right">{{ " " }}10.2</div>
                  <div class="count-up">+1.01%&nbsp;本周</div>
                </div>
                <div class="main-label">已入库数据</div>
                <div class="Data">{{ this.Densitys.total }}</div>
              </div>
              <div
                class="preview3"
                @dblclick="finally_new"
                @click="toGetData(3)"
              >
                <div>
                  <div class="preview-type">输运数据</div>
                  <img
                    style="width: 28px"
                    src="@/assets/images/shouye/transport.png"
                  />
                </div>
                <div class="main-label">总数据</div>
                <div class="Data">
                  {{ this.toData[2] }}
                  <span v-if="this.toData[2] == ''">0</span>
                </div>
                <div>
                  <div class="el-icon-top-right">{{ " " }}10.2</div>
                  <div class="count-up">+1.01%&nbsp;本周</div>
                </div>
                <div class="main-label">已入库数据</div>
                <div class="Data">{{ this.finally.total }}</div>
              </div>
              <div class="preview4">
                <div>
                  <div class="preview-type">燃烧实验数据</div>
                  <div class="el-icon-top-right">{{ " " }}10.2</div>
                  <div class="count-up">+1.01%&nbsp;本周</div>
                  <img
                    style="width: 28px"
                    src="@/assets/images/shouye/burning.png"
                  />
                </div>
                <div class="burning-data">
                  <div class="burning-left" @click="toGetData(4)">
                    <div class="main-label" @dblclick="toIgnite">点火延迟</div>
                    <div class="label-data" @dblclick="toIgnite">
                      <div class="Data">{{ this.toData[3] }}</div>
                      <div class="dataType">总数据</div>
                      <div class="Data">
                        {{ this.listIgnites.total }}
                      </div>
                      <div class="dataType">已入库</div>
                    </div>
                    <div class="main-label" @dblclick="toDensity">
                      高温热物性
                    </div>
                    <div class="label-data" @dblclick="toDensity">
                      <div class="Data">{{ this.toData[4] }}</div>
                      <div class="dataType">总数据</div>
                      <div class="Data">{{ this.Densitys.total }}</div>
                      <div class="dataType">已入库</div>
                    </div>
                  </div>
                  <div class="burning-right">
                    <div class="main-label">物种浓度</div>
                    <div class="label-data">
                      <div class="Data">{{ this.toData[5] }}</div>
                      <div class="dataType">总数据</div>
                      <div class="Data">43</div>
                      <div class="dataType">已入库</div>
                    </div>
                    <div class="main-label" @dblclick="toLaminar">层流</div>
                    <div class="label-data" @dblclick="toLaminar">
                      <div class="Data">{{ this.toData[6] }}</div>
                      <div class="dataType">总数据</div>
                      <div class="Data">{{ this.listLaminars.total }}</div>
                      <div class="dataType">已入库</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </el-col>

        <div>
          <el-col :span="5" style="margin: 20px 20px 0px 0px; height: 300px">
            <div style="min-width: 300px; min-height: 300px">
              <div
                ref="highTemperature"
                style="width: 100%; height: 300%"
                v-if="changeFlag === true"
              ></div>
            </div>
          </el-col>
          <el-col :span="5" style="margin: 20px 20px 0px 20px; height: 300px">
            <div style="min-width: 300px; min-height: 300px">
              <div
                ref="Potency"
                style="width: 100%; height: 300%"
                v-if="changeFlag === true"
              ></div>
            </div>
          </el-col>
          <el-col :span="9" style="margin: 20px 20px 0px 20px">
            <div
              style="min-width: 813px; min-height: 300px; background: #ffffff"
            >
              <div
                ref="Issue"
                style="width: 100%; height: 300%"
                v-show="changeFlag === true && dataChange === 0"
              ></div>
              <div
                ref="Labs"
                style="width: 100%; height: 300%"
                v-show="changeFlag === true && dataChange === 1"
              ></div>
            </div>
            <div class="changeBtn">
              <el-button type="primary" @click="changeLabsEcharts" size="small"
                >总数据</el-button
              >
              <el-button type="primary" @click="changeAllEcharts" size="small">
                实验数据
              </el-button>
            </div>
          </el-col>
          <el-col :span="23">
            <div style="min-width: 800px; min-height: 300px">
              <div
                ref="Share"
                style="width: 100%; height: 300%"
                v-if="changeFlag === true"
              ></div>
            </div>
          </el-col>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { getInterviewNewData } from "@/api/burnPower/interviewPages";
import { getDataCountV5 } from "@/api/burnPower/interface";
import {
  getlistTrendAnalyNewData,
  getlistDataChangeRate,
} from "@/api/burnPower/trendAnalyses";
import { getPrimaryRs } from "@/api/scckocMeta/scckocMeta";

//各个表的数据
import { getlistlistProblemNewData } from "@/api/burnPower/problem";
import { getNewVisitorNewData } from "@/api/burnPower/newVisitor";
import { getlistOldVisitorNewData } from "@/api/burnPower/oldVisitor";
import { listBasicInfo } from "@/api/burnPower/basicInfo";
import { listDensity } from "@/api/burnPower/density";
import { listThermoInfo } from "@/api/burnPower/thermoInfo";
import { listTransfer } from "@/api/system/transfer";
import { listInfo } from "@/api/system/info";
import { listIgnite } from "@/api/output/ignite";
import { listLaminar } from "@/api/output/laminar";

import echarts from "echarts";
export default {
  name: "Index",
  data() {
    return {
      // 版本号
      version: "3.6.0",
      top6: [],
      qtop6: [],
      TrendAnalData: {},
      NewVisitors: {},
      OldVisitors: {},
      DataChangeRate: [],
      BasicInfos: {
        total: "",
      },
      Densitys: {
        total: "",
      },
      ThermoInfos: {
        total: "",
      },
      finally: {
        total: "",
      },
      Dynamics: {
        total: "",
      },

      listIgnites: {
        total: "",
      },
      listLaminars: {
        total: "",
      },

      toData: [,],
      //echarts切换
      dataChange: 0,
      //echarts渲染
      changeStatus: true,
      changeFlag: true,

      //存放首页数据源参数
      dataform: "",
      option: {
        backgroundColor: "#ffffff",
        title: {
          text: "近30日访问趋势",
          left: "left",
          textStyle: {
            fontSize: 28,
          },
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
          axisLine: {
            show: false,
          },
          axisTick: { show: false },
        },

        yAxis: {
          type: "value",
          axisLine: {
            show: false,
          },
          axisTick: { show: false },
          // splitLine: {
          //   show: false,
          // },
        },
        series: [
          {
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: "line",
            areaStyle: {},
          },
        ],
      },

      option1: {
        backgroundColor: "#ffffff",
        title: {
          text: "高温热物性",

          left: "left",
          textStyle: {
            fontSize: 28,
          },
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "vertical",
          x: "right",
          y: "center",
          itemWidth: 30,
          itemHeight: 30,
          textStyle: {
            fontSize: 17,
          },
        },

        color: ["#b4480d", "#FACD91", "#764711"],
        series: [
          {
            type: "pie",
            radius: "80%",
            center: ["36%", "55%"],
            data: [
              { value: 1048, name: "物种一" },
              { value: 735, name: "物种二" },
              { value: 580, name: "物种三" },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
            label: {
              normal: {
                position: "inner",
                textStyle: {
                  fontSize: 18,
                },
              },
            },
            labelLine: {
              normal: {
                show: false,
              },
            },
          },
        ],
      },
      option2: {
        backgroundColor: "#ffffff",
        title: {
          text: "物种浓度",
          left: "left",
          textStyle: {
            fontSize: 28,
          },
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "vertical",
          x: "right",
          y: "center",
          itemGap: 30,
          itemWidth: 30,
          itemHeight: 30,
          textStyle: {
            fontSize: 17,
          },
        },
        color: ["#b4480d", "#FACD91"],
        series: [
          {
            type: "pie",
            radius: "80%",
            center: ["36%", "55%"],
            data: [
              { value: 1048, name: "物种一" },
              { value: 735, name: "物种二" },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
            label: {
              normal: {
                position: "inner",
                textStyle: {
                  fontSize: 18,
                },
              },
            },
            labelLine: {
              normal: {
                show: false,
              },
            },
          },
        ],
      },
      option3: {
        backgroundColor: "#ffffff",
        title: {
          text: "最近七次发布数据",
          left: "left",
          textStyle: {
            fontSize: 28,
          },
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["Email", "Union Ads", "Video Ads", "Direct"],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "1",
            type: "line",
            stack: "1",
            data: [120, 132, 101, 134, 90, 230, 210],
          },
          {
            name: "2",
            type: "line",
            stack: "2",
            data: [220, 182, 191, 234, 290, 330, 310],
          },
          {
            name: "3",
            type: "line",
            stack: "3",
            data: [150, 232, 201, 154, 190, 330, 410],
          },
          {
            name: "4",
            type: "line",
            stack: "4",
            data: [320, 332, 301, 334, 390, 330, 350],
          },
        ],
      },
      option4: {
        backgroundColor: "#ffffff",
        title: {
          text: "最近七日数据分享",
          left: "left",
          textStyle: {
            fontSize: 28,
          },
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["Email", "Union Ads", "Video Ads", "Direct", "Search Engine"],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "Email",
            type: "line",
            stack: "Total",
            data: [120, 132, 101, 134, 90, 230, 210],
          },
          {
            name: "Union Ads",
            type: "line",
            stack: "Total",
            data: [220, 182, 191, 234, 290, 330, 310],
          },
        ],
      },
      option5: {
        backgroundColor: "#ffffff",
        title: {
          text: "实验数据分享",
          left: "left",
          textStyle: {
            fontSize: 28,
          },
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["Email", "Union Ads", "Video Ads", "Direct", "Test"],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "1",
            type: "line",
            stack: "1",
            data: [120, 132, 101, 134, 90, 230, 210],
          },
          {
            name: "2",
            type: "line",
            stack: "2",
            data: [220, 182, 191, 234, 290, 330, 310],
          },
          {
            name: "3",
            type: "line",
            stack: "3",
            data: [150, 232, 201, 154, 190, 330, 410],
          },
          {
            name: "4",
            type: "line",
            stack: "4",
            data: [320, 332, 301, 334, 390, 330, 350],
          },
          {
            name: "5",
            type: "line",
            stack: "5",
            data: [240, 362, 101, 234, 190, 230, 250],
          },
        ],
      },

      tishi: true,
    };
  },
  methods: {
    changeAllEcharts() {
      if (this.dataChange === 0) {
        this.dataChange = 1;
        this.$nextTick(() => {
          this.getLabsLine();
        });
      }
    },
    changeLabsEcharts() {
      if (this.dataChange === 1) {
        this.dataChange = 0;
        this.$nextTick(() => {
          this.getIssueLine();
        });
      }
    },
    showPaneIndex(val) {
      if (val.index == 0) {
        this.changeStatus === true;
        this.changeFlag === false;
        this.$nextTick(() => {
          this.gettubiao();
        });
      } else {
        this.changeStatus === false;
        this.changeFlag === true;
        this.$nextTick(() => {
          this.getHTpie();
          this.getPotencyPie();
          this.getIssueLine();
          this.getShareLine();
        });
      }
    },
    gettubiao() {
      this.chartColumn = echarts.init(this.$refs.chartColumn);
      this.chartColumn.setOption(this.option);
      this.$nextTick(() => {
        this.chartColumn.resize({
          width: this.$refs.chartColumn.clientWidth,
          height: this.$refs.chartColumn.clientHeight,
        });
      });
    },
    getHTpie() {
      this.highTemperature = echarts.init(this.$refs.highTemperature);
      this.highTemperature.setOption(this.option1);
    },
    getPotencyPie() {
      this.Potency = echarts.init(this.$refs.Potency);
      this.Potency.setOption(this.option2);
    },
    getIssueLine() {
      this.Issue = echarts.init(this.$refs.Issue);
      this.Issue.setOption(this.option3);
    },
    getShareLine() {
      this.Share = echarts.init(this.$refs.Share);
      this.Share.setOption(this.option4);
    },
    getLabsLine() {
      this.Labs = echarts.init(this.$refs.Labs);
      this.Labs.setOption(this.option5);
    },
    info(toData) {
      console.log(toData);
    },
    gitInitData() {
      //初始化运行接口

      // 获取表id以及表名
      // getPrimaryRs((res) => {
      //   console.log("获取表id以及表名 ", res.data);
      // });
      //获取top6数据
      getInterviewNewData().then((res) => {
        console.log("获取top6数据", res);
        this.top6 = res;

        // console.log("新接口this.top6", this.top6);
      });
      // 获取趋势分析数据
      getlistTrendAnalyNewData().then((res) => {
        this.TrendAnalData = res[0];
        // console.log(" this.TrendAnalData", this.TrendAnalData);
      });

      //获取问题反馈
      getlistlistProblemNewData().then((res) => {
        console.log("问题反馈", res);
        this.qtop6 = res;
        console.log("this.qtop6", this.qtop6);
      });

      console.log("text");
      getNewVisitorNewData().then((res) => {
        console.log("NewVisitor", res);
        this.NewVisitors = res[0];
        console.log("this.NewVisitors", this.NewVisitors);
      });

      getlistOldVisitorNewData().then((res) => {
        console.log("OldVisitor1", res);
        this.OldVisitors = res[0];
        console.log("OldVisitor2", this.OldVisitors);
        console.log("OldVisitor3", this.OldVisitors.numbersVisitors);
      });

      //物种数据
      listBasicInfo().then((res) => {
        console.log("BasicInfo", res);
        this.BasicInfos.total = res.total;
      });
      //实验数据
      listDensity().then((res) => {
        console.log("Density", res);
        this.Densitys.total = res.total;
      });
      //热力学数据
      listThermoInfo().then((res) => {
        console.log("ThermoInfo", res);
        this.ThermoInfos.total = res.total;
      });
      // 输运数据
      listTransfer().then((res) => {
        console.log("finally_new", res);
        this.finally.total = res.total;
      });
      //动力学数据
      listInfo().then((res) => {
        console.log("DynamicsData", res);
        this.Dynamics.total = res.total;
      });
      //动力学数据
      listIgnite().then((res) => {
        console.log("listIgnite", res);
        this.listIgnites.total = res.total;
      });
      //动力学数据
      listLaminar().then((res) => {
        console.log("listLaminar", res);
        this.listLaminars.total = res.total;
      });

      this.getlistDataCountV5();
    },
    goTarget(href) {
      window.open(href, "_blank");
    },

    //测试方法,随意删除
    text() {
      console.log("打印数据状态", this.BasicInfos.total);
    },
    getlistDataCountV5() {
      // 获取表id以及表名
      getPrimaryRs().then((res) => {
        console.log("获取表id以及表名 ", res.data);
      });
      let modeid = [6, 2, 9, 8, 1, 3, 7];
      // 接收数组

      for (let i = 0; i < 7; i++) {
        getDataCountV5(modeid[i]).then((res) => {
          console.log("总数据", i, ":", res);

          this.toData[i] = res;
        });
      }

      console.log("toData", this.toData);
    },
    // 进入物种数据页面
    toBascinfo() {
      console.log("双击进入toBascinfo");
      this.$router.push({ path: "/output/mainDataBase/basicInfo" });
    },
    // 进入点火延迟页面
    toIgnite() {
      console.log("双击进入");
      this.$router.push({ path: "/output/mainDataBase/ignite" });
    },

    // 进入物种浓度页面
    toDensity() {
      console.log("双击进入");
      this.$router.push({ path: "/output/mainDataBase/density" });
    },
    // 进入高温热物性据页面
    toDensity() {
      console.log("双击进入");
      this.$router.push({ path: "/output/mainDataBase/density" });
    },

    // 进入层流页面
    toLaminar() {
      console.log("双击进入");
      this.$router.push({ path: "/output/mainDataBase/laminar" });
    },

    // 进入热力学数据页面
    toThermo_info() {
      console.log("双击进入");
      this.$router.push({ path: "/output/mainDataBase/thermoInfo" });
    },

    // 进入输运数据页面

    finally_new() {
      console.log("双击进入");
      this.$router.push({ path: "/output/mainDataBase/finally_new" });
    },

    // 进入动力学数据页面

    dynamic_info() {
      console.log("双击进入");
      this.$router.push({ path: "/output/mainDataBase/dynamic_info" });
    },

    // // 进入新访客页面

    toNew_visitor() {
      console.log("双击进入");
      this.$router.push({ path: "/maintenance/new_visitor/list" });
    },

    // // 进入老访客页面

    toOld_visitor() {
      console.log("双击进入");
      this.$router.push({ path: "/maintenance/list/list" });
    },

    // // 进入Top6受访页面

    toInterview_pages() {
      console.log("双击进入");
      this.$router.push({ path: "/maintenance/interview_pages/list" });
    },

    // 进入问题反馈页面

    toProblem_feedback() {
      console.log("双击进入");
      this.$router.push({ path: "/maintenance/problem_feedback/list" });
    },

    // 进入趋势分析页面

    toTrend_analysis() {
      console.log("双击进入");
      this.$router.push({ path: "/maintenance/trend_analysis/list" });
    },

    //返回趋势分析上升下降趋势
    getlistChangeRateData() {
      getlistDataChangeRate()
        .then((res) => {
          this.DataChangeRate[2] = res[0].numberIp - res[1].numberIp;
          this.DataChangeRate[0] = res[0].pageView - res[1].pageView;
          this.DataChangeRate[1] =
            res[0].numberVisitors - res[1].numberVisitors;
          console.log("返回趋势分析上升下降趋势", res);
          console.log(this.DataChangeRate);
        })
        .catch((res) => {
          console.log("返回趋势分析上升下降趋势", { res });
        });
    },

    toGetData(res) {
      this.dataform = res;
      console.log(this.dataform);
    },
  },
  created() {},
  watch() {},
  mounted() {
    this.gitInitData();
    this.gettubiao();

    this.getlistChangeRateData();

    window.addEventListener("resize", () => {
      this.myChart1.resize();
    });
  },
};
</script>

<style scoped lang="scss">
::v-deep .el-tabs__header {
  background: white;
  width: 96%;
  margin: 0px 0px 0px 0px;

  /*去掉切换时el-tab-pane底部的蓝色下划线*/
  // .el-tabs__active-bar {
  //   background-color: transparent !important;
  // }

  /*去掉tabs底部的下划线*/
  .el-tabs__nav-wrap::after {
    position: static !important;
  }
}

.el-row {
  margin-bottom: 20px;
  min-width: 1152px;

  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.el-icon-top-right {
  margin: 0px 0px 0px 8px;
  display: inline-block;
  height: 27px;
  font-size: 20px;
  font-family: Alibaba PuHuiTi-Regular, Alibaba PuHuiTi;
  font-weight: 600;
  color: #ff3b30;
  line-height: 27px;
}
.el-icon-bottom-right {
  margin: 0px 0px 0px 8px;
  display: inline-block;
  height: 27px;
  font-size: 20px;
  font-family: Alibaba PuHuiTi-Regular, Alibaba PuHuiTi;
  font-weight: 600;
  color: #34c759;
  line-height: 27px;
}
.bg-purple-dark {
  background: #ffffff;
  height: 325px;

  .top-content {
    display: flex;
    .preview-type {
      display: inline-block;
      height: 34px;
      font-size: 30px;
      font-family: Alibaba PuHuiTi-Medium, Alibaba PuHuiTi;
      font-weight: bold;
      line-height: 27px;
      vertical-align: top;
    }
    img {
      float: right;
      // margin-right: 24px;
    }
    .count-up {
      margin-left: 23px;
      display: inline-block;
      height: 27px;
      font-size: 20px;
      font-family: Alibaba PuHuiTi-Regular, Alibaba PuHuiTi;
      font-weight: 600;
      color: #34c759;
      line-height: 27px;
    }
    .main-label {
      margin-top: 18px;

      height: 26px;
      font-size: 20px;
      font-family: Alibaba PuHuiTi-Regular, Alibaba PuHuiTi;
      font-weight: 500;
      color: #343434;
      line-height: 24px;
    }
    .Data {
      margin-bottom: 8px;
      margin-left: 5px;
      height: 45px;
      font-size: 30px;
      font-family: Alibaba PuHuiTi-Regular, Alibaba PuHuiTi;
      font-weight: 400;
      color: #333333;
      line-height: 60px;
    }
    .preview {
      &1 {
        flex-grow: 1;
        min-width: 210px;
        height: 100%;
        border-right: 1px rgba(179, 179, 179, 0.4) solid;
        padding: 0 24px 0 0;
        .preview-type {
          color: #ff7c24;
        }
      }
      &2 {
        flex-grow: 1;
        min-width: 210px;
        height: 100%;
        border-right: 1px rgba(179, 179, 179, 0.4) solid;
        padding: 0 24px;
        .preview-type {
          color: #2a40ff;
        }
      }
      &3 {
        flex-grow: 1;
        min-width: 210px;
        height: 100%;
        border-right: 1px rgba(179, 179, 179, 0.4) solid;
        padding: 0 24px;
        .preview-type {
          color: #8146ff;
        }
      }
      &4 {
        flex-grow: 1;
        min-width: 435px;
        height: 100%;
        padding: 0 24px;
        .preview-type {
          color: #dc322f;
          margin-right: 6px;
        }
        .burning-data {
          display: flex;
          // overflow: hidden;
          .burning-left {
            flex-grow: 1;
            border-right: 1px rgba(179, 179, 179, 0.4) solid;
            margin-right: 28px;
            padding-right: 20px;
          }
          .burning-right {
            flex-grow: 1;
          }
          .label-data {
            display: flex;
            &:nth-child(2) {
              margin-bottom: 26px;
            }
            .dataType {
              margin-top: 20px;
              flex-grow: 1;
              height: 45px;
              text-align: right;
              font-size: 20px;
              font-family: Alibaba PuHuiTi-Regular, Alibaba PuHuiTi;
              font-weight: 400;
              color: #ff5084;
              line-height: 25px;
              &:nth-child(2) {
                color: #4458ff;
                margin-right: 22px;
              }
            }
          }
        }
      }
    }
  }
}
.bg-purple-bottom {
  background: #ffffff;
  height: 370px;

  .bottom-content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    div {
      width: 32%;
      margin-top: 10px;
    }
    .thr-item {
      margin-bottom: 24px;
    }
    .content-item {
      width: 100%;

      height: 30px;
      font-size: 20px;
      font-family: Alibaba PuHuiTi-Regular, Alibaba PuHuiTi;
      font-weight: 400;
      color: #3a3a3a;
      line-height: 24px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    .item-count {
      margin-top: 20px;
      display: inline-block;
      margin-right: 5px;
      height: 65px;
      font-size: 31px;
      font-family: Alibaba PuHuiTi-Bold, Alibaba PuHuiTi;
      font-weight: bold;
      color: #333333;
      line-height: 45px;
    }
  }
}
.bg-purple-bottom-right {
  background: #ffffff;
  height: 370px;
  margin-left: 16px;
  .tp6-underline {
    border-bottom: 1px dashed #666;
  }
  .qtop-name {
    width: 112px;
    height: 21px;
    font-size: 20px;
    font-family: Alibaba PuHuiTi-Regular, Alibaba PuHuiTi;
    font-weight: 400;
    line-height: 21px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin-bottom: 15px;
  }

  .qtop-text {
    flex-grow: 2;
    width: 36%;
    height: 21px;
    font-size: 20px;
    font-family: Alibaba PuHuiTi-Regular, Alibaba PuHuiTi;
    font-weight: 400;
    line-height: 21px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin-left: 1%;
    margin-right: 30px;
    margin-bottom: 15px;
  }

  .qtop-time {
    flex-grow: 1;
    width: 82px;
    height: 21px;
    font-size: 18px;
    font-family: Alibaba PuHuiTi-Regular, Alibaba PuHuiTi;
    font-weight: 400;
    line-height: 21px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin-right: 3%;
    margin-bottom: 15px;
  }
  .qtop-status-blue {
    min-width: 55px;
    height: 20px;
    font-size: 18px;
    font-family: Alibaba PuHuiTi-Regular, Alibaba PuHuiTi;
    font-weight: 500;
    color: #2a40ff;
    line-height: 20px;
  }
  .qtop-status-red {
    min-width: 55px;
    height: 20px;
    font-size: 18px;
    font-family: Alibaba PuHuiTi-Regular, Alibaba PuHuiTi;
    font-weight: 600;
    color: #dc322f;
    line-height: 20px;
  }
}

// 新老访客样式
.bg-purple {
  background: #ffffff;
  height: 370px;

  .visitor {
    color: #2a40ff;
    display: flex;
    .text {
      margin-top: 12px;
      height: 60px;
      font-size: 30px;
      font-family: Alibaba PuHuiTi-Medium, Alibaba PuHuiTi;
      font-weight: bold;
      // line-height: 24px;
      vertical-align: bottom;
    }
    .rate {
      margin-left: 25px;
      height: 60px;
      font-size: 30px;
      font-family: Alibaba PuHuiTi-Bold, Alibaba PuHuiTi;
      font-weight: bold;
      line-height: 70px;
    }
  }
  .visitor-row {
    display: flex;
    justify-content: space-between;
    text-align: center;
    margin: 20px 0;
    .visit-item {
      .main-label {
        font-size: 23px;
        font-family: Alibaba PuHuiTi-Regular, Alibaba PuHuiTi;
        font-weight: 400;
        color: #5c5c5c;
        line-height: 24px;
        margin-bottom: 20px;
      }
      .Data {
        margin-bottom: 26px;
        height: 20px;
        font-size: 23px;
        font-family: Alibaba PuHuiTi-Bold, Alibaba PuHuiTi;
        font-weight: bold;
        color: #333333;
        line-height: 27px;
      }
    }
  }
  .visit {
    position: relative;
    .main-label {
      position: absolute;
      height: 40px;
      font-size: 20px;
      font-family: Alibaba PuHuiTi-Regular, Alibaba PuHuiTi;
      font-weight: 400;
      color: #4f4f4f;
      line-height: 24px;

      // margin-bottom: 11px;
    }
    .Data {
      position: absolute;
      right: 0;
      height: 36px;
      font-size: 23px;
      font-family: Alibaba PuHuiTi-Bold, Alibaba PuHuiTi;
      font-weight: bold;
      color: #ff7c24;
      line-height: 24px;
    }
  }
  .old-visitor {
    color: #34c759;
    display: flex;
    .text {
      margin-top: 12px;
      height: 60px;
      font-size: 30px;
      font-family: Alibaba PuHuiTi-Medium, Alibaba PuHuiTi;
      font-weight: bold;
      // line-height: 24px;
      vertical-align: bottom;
    }
    .rate {
      margin-left: 25px;
      height: 60px;
      font-size: 30px;
      font-family: Alibaba PuHuiTi-Bold, Alibaba PuHuiTi;
      font-weight: bold;
      line-height: 70px;
    }
  }
}
.grid-content {
  border-radius: 4px;
  min-height: 261px;
  padding: 30px 30px 0px 30px;
  .top-title {
    height: 36px;
    font-size: 28px;
    font-family: Alibaba PuHuiTi-Regular, Alibaba PuHuiTi;
    font-weight: 600;
    color: #303030;
    line-height: 16px;
  }
}
.top6-content {
  display: flex;
  margin-top: 9px;
  .topSix {
    width: 25px;
    height: 25px;
    margin-right: 20px;
    border-radius: 50%;
    font-size: 20px;
    color: #ffffff;
    text-align: center;
    margin-bottom: 13px;
    line-height: 25px;
  }
  .top {
    &0 {
      background-color: #dc322f;
    }
    &1 {
      background-color: #ff7c24;
    }
    &2 {
      background-color: #34c759;
    }
    &3 {
      background-color: #cccccc;
    }
    &4 {
      background-color: #cccccc;
    }
    &5 {
      background-color: #cccccc;
    }
  }
  .top-url {
    width: 24%;
    height: 36px;
    font-size: 18px;
    font-family: Alibaba PuHuiTi-Regular, Alibaba PuHuiTi;
    font-weight: 400;
    color: #2a40ff;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin-right: 5%;

    // line-height: 21px;
  }
  .progress {
    width: 35%;
    height: 30px;
    margin-right: 5%;
  }
  ::v-deep .el-progress__text {
    height: 30px;
    font-size: 20px;
    font-family: Alibaba PuHuiTi-Bold, Alibaba PuHuiTi;
    font-weight: bold;
    color: #2a40ff;
  }
  .top-text {
    width: 23%;
    min-width: 75px;
    height: 20px;
    font-size: 18px;
    font-family: Alibaba PuHuiTi-Regular, Alibaba PuHuiTi;
    font-weight: 500;
    color: #333333;
    line-height: 20px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}

.linshiziti {
  font-size: 23px;
}
.changeBtn {
  position: relative;
  top: -295px;
  left: 625px;
}
</style>
